<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时间控件</title>
    <link rel="stylesheet" href="./css/dateTime.css">
    <script src="./js/jquery-1.8.2.js"></script>
    <script src="./js/core.js"></script>
    <script src="./js/dateTimeBase.js"></script>
    <script src="./js/dateTime.js"></script>
</head>
<body>
默认:<div id="single"></div>

<div class="dt-dateTime-panel-container">
    <div class="dt-dateTime-panel-layout">
        <div class="dt-dateTime-panel-column">
            <div class="dt-dateTime-panel-date-container">
                <div class="dt-dateTime-panel-date-header">
                    <button type="button" class="dt-dateTime-year-prev">
                        <span class="dt-dateTime-arrow">
                            <svg t="1706151158881" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8117" width="24"><path d="M550.4 494.933333l192 192 29.866667-29.866666-162.133334-162.133334 162.133334-162.133333-29.866667-29.866667-192 192z m-256 0l192 192 29.866667-29.866666-162.133334-162.133334 162.133334-162.133333-29.866667-29.866667-192 192z" fill="#444444" p-id="8118"></path></svg>
                        </span>
                    </button>
                    <button type="button" class="dt-dateTime-month-prev">
                        <span class="dt-dateTime-arrow">
                            <svg t="1706152294626" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8271" width="24"><path d="M384 512l192 192 29.866667-29.866667-162.133334-162.133333 162.133334-162.133333-29.866667-29.866667L384 512z" fill="#444444" p-id="8272"></path></svg>
                        </span>
                    </button>
                    <div class="dt-dateTime-panel-date-header_content">
                        <button type="button" class="dt-dateTime-year">2024年</button>
                        <button type="button" class="dt-dateTime-month">1月</button>
                    </div>
                    <button type="button" class="dt-dateTime-month-next">
                        <span class="dt-dateTime-arrow">
                            <svg t="1706152366635" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8425" width="24"><path d="M644.266667 494.933333l-192 192-29.866667-29.866666 162.133333-162.133334-162.133333-162.133333 29.866667-29.866667 192 192z" fill="#444444" p-id="8426"></path></svg>
                        </span>
                    </button>
                    <button type="button" class="dt-dateTime-year-next">
                        <span class="dt-dateTime-arrow">
                            <svg t="1706151119685" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7963" width="24"><path d="M516.266667 494.933333l-192 192-29.866667-29.866666 162.133333-162.133334-162.133333-162.133333 29.866667-29.866667 192 192z m256 0l-192 192-29.866667-29.866666 162.133333-162.133334-162.133333-162.133333 29.866667-29.866667 192 192z" fill="#444444" p-id="7964"></path></svg>
                        </span>
                    </button>
                </div>
                <div class="dt-dateTime-date-wrapper">
                    <div class="dt-dateTime-week-container">
                        <span class="dt-dateTime-week_btn">周一</span>
                        <span class="dt-dateTime-week_btn">周二</span>
                        <span class="dt-dateTime-week_btn">周三</span>
                        <span class="dt-dateTime-week_btn">周四</span>
                        <span class="dt-dateTime-week_btn">周五</span>
                        <span class="dt-dateTime-week_btn dt-dateTime-week_weekday">周六</span>
                        <span class="dt-dateTime-week_btn dt-dateTime-week_weekday">周天</span>
                    </div>
                    <div class="dt-dateTime-date-container">
                        <div class="dt-dateTime-date">
                            <button type="button" class="dt-dateTime-date_btn">1</button>
                        </div>
                        <div class="dt-dateTime-date">
                            <button type="button" class="dt-dateTime-date_btn">1</button>
                        </div>
                        <div class="dt-dateTime-date">
                            <button type="button" class="dt-dateTime-date_btn">1</button>
                        </div>
                        <div class="dt-dateTime-date">
                            <button type="button" class="dt-dateTime-date_btn">1</button>
                        </div>
                        <div class="dt-dateTime-date">
                            <button type="button" class="dt-dateTime-date_btn">1</button>
                        </div>
                        <div class="dt-dateTime-date">
                            <button type="button" class="dt-dateTime-date_btn">1</button>
                        </div>
                        <div class="dt-dateTime-date">
                            <button type="button" class="dt-dateTime-date_btn">1</button>
                        </div>
                        <div class="dt-dateTime-date">
                            <button type="button" class="dt-dateTime-date_btn">1</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="dt-dateTime-time-container">

            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    $(document).ready(function () {
        $.dateTime.create({
            type: 'single',
            id: '#single'
        })

        var oDetail = $.dateTime.init($('#single'), {
            type: 'single'
        })
    })
</script>